<template>
	<div class="main">
		<div class="title"><span>评教系统</span> </div>
	<div class="login">
      <van-tabs v-model:active="active" animated >
        <van-tab title="学生登录" >
			<van-form >
			  <van-cell-group inset>
			    <van-field
			      v-model="loginparam.username"
			      name="用户名"
			      label="用户名"
			      placeholder="用户名"
			      :rules="[{ required: true, message: '请填写用户名' }]"
			    />
			    <van-field
			      v-model="loginparam.password"
			      type="password"
			      name="密码"
			      label="密码"
			      placeholder="密码"
			      :rules="[{ required: true, message: '请填写密码' }]"
			    />
			  </van-cell-group>
			  <div style="margin: 16px;">
			    <van-button round block type="primary" native-type="submit" @click="onSubmit"> 
			      登录
			    </van-button>
			  </div>
			</van-form>
		</van-tab>
        <van-tab title="教师登录">
			<van-form >
			  <van-cell-group inset>
			    <van-field
			      v-model="loginparam.username"
			      name="用户名"
			      label="用户名"
			      placeholder="用户名"
			      :rules="[{ required: true, message: '请填写用户名' }]"
			    />
			    <van-field
			      v-model="loginparam.password"
			      type="password"
			      name="密码"
			      label="密码"
			      placeholder="密码"
			      :rules="[{ required: true, message: '请填写密码' }]"
			    />
			  </van-cell-group>
			  <div style="margin: 16px;">
			    <van-button round block type="primary" native-type="submit" @click="onSubmit1"> 
			      登录
			    </van-button>
			  </div>
			</van-form>
		</van-tab>
      </van-tabs>
    </div>
	</div>
</template>

<script>
	// import { ref } from 'vue';
	import {loginByUsername} from '../../api/login.js'
	export default {
	//   setup() {
	//     const username = ref('');
	//     const password = ref('');
	//     const onSubmit = (values) => {
	//       console.log('submit', values);
	//     };
	
	//     return {
	//       username,
	//       password,
	//       onSubmit,
	//     };
	//   },
	data() {
		return{
			loginparam:{
				username:"admin",
			password:"admin123"
			},
			active:[]
		}
	},
	created() {
		
	},
	methods:{
		 onSubmit(){
			 
			this.$store.dispatch('LoginByUsername', this.loginparam)
			.then(()=>{
				this.$router.push('/');
			}).catch((value)=>{
				// this.$message.error(value.msg)
			})
			
		},
		onSubmit1(){
			this.$store.dispatch('LoginByUsername', this.loginparam)
			.then(()=>{
				this.$router.push('/teacher');
			}).catch((value)=>{
				// this.$message.error(value.msg)
			})
			
		},
	}
	};


</script>

<style scoped>
	.main{
		height: 100vh;
		width: 100%;
		background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.O0Rf20K5GWTPKDGvz9uy_gHaCz?w=327&h=132&c=7&r=0&o=5&dpr=1.3&pid=1.7');
		background-size: 100% 100%;
		
		}
	.title{
		text-align: center;
		padding-top: 60px;
		font-size: 26px;
	}
	.login{
		padding-top: 180px;
		/* width: 370px; */
	}
	 .login .van-tabs{
		margin: auto;
		width: 95%;
		background: transparent;
		
	}
	.login .van-tabs .van-form{
		/* margin: auto; */
		width: 99%;
		
	}
	.van-tab__pane{
		border-radius: 0%;
	}
	 .van-cell-group--inset {
		margin: 0 0 0 0;
	}
</style>